<template>
  <div>
    <mt-loadmore :top-method="loadTop" :bottom-method="loadBottom" :bottom-all-loaded="allLoaded" ref="loadmore">
    <div class="all" v-for="(item,index) in list">
      <keep-alive>
      <router-link class="router"
                   :to="{path:'/xq',
                   query:{
                      cid:item.id,status:item.status,version:'v1',
                      tel:param.tel,unionid:param.unionid,openid:param.openid,uid:param.uid,
                      nickname:param.nickname,name:param.name,major:param.major,sex:param.sex,avatar:param.avatar
                   },
                   }">
      <!--首页头部-->
        <div class="head" >
          <img :src="url+item.thumb" alt="">
        </div>

      <!--首页内容-->
      <div class="content">
        <h3 class="contentname">{{item.name}}   </h3>
        <!--讲师信息-->
        <div>
          <ul class="teacher" v-for="tea in tea1">
            <li><img :src="url+tea.avatar" alt="" class="imgteacher1"></li>
            <li class="myid1">{{tea.name}}</li>
          </ul>
        </div>

        <!--课程价格详情(未购买)-->
        <div class="price" v-if="item.is_buy == 0 && item.is_stop!=1">
          <h3>￥{{item.price}}</h3>
          <span>{{item.type | classType}}</span>
          <p>{{item.slogen}}</p>
        </div>
        <div class="price" v-if="item.is_buy == 0 && item.is_stop==1">
          <button  v-if="item.is_stop==1" class="button1">已报满</button>
        </div>

        <!--已购买-->
        <div class="price2" v-if="item.is_buy == 1">
          <button  v-if="item.is_stop==1" class="button1">已报满</button>
          <button   v-if="item.is_stop==2" class="price3">去学习</button>

        </div>
        <button v-if="item.is_stop!=1 && item.is_stop!=2 && item.is_buy != 1 && item.is_buy != 0" class="button1">已停课</button>

        <!--招生已满-->
        <!--时间+购买人数-->
        <div class="time">
          <p class="myTime"><img src="../assets/images/sz.png" alt="">{{item.start_time| data('YMD')}}-{{item.end_time| data('YMD')}}</p>
        </div><span class="shopping">{{item.fake_buy}}人已购买</span>
      </div>
      </router-link>
      </keep-alive>
    </div>

    <!--<div class="bottom-tab">-->
    <!--<div class="tab-item" @click="switabTo(url+'Home/index/index')">-->
    <!--<img :src="url+'Home/index/index' === $route.path ? tabBarImgArr[0].selected : tabBarImgArr[0].normal" alt="首页" class="myimg">-->
    <!--<span :class="{on: url+'Home/index/index' === $route.path}">首页</span>-->
    <!--</div>-->
    <!--<div class="tab-item" @click="switchTo('/')">-->
    <!--<img :src="'/' === $route.path ? tabBarImgArr[1].selected : tabBarImgArr[1].normal" alt="推荐" class="myimg">-->
    <!--<span :class="{on: '/' === $route.path}">班级</span>-->
    <!--</div>-->
    <!--<div class="tab-item" @click="switabTo(url+'Home/Sevencircle/index')">-->
    <!--<img :src="url+'Home/Sevencircle/index' === $route.path ? tabBarImgArr[2].selected : tabBarImgArr[2].normal" alt="搜索" class="myimg">-->
    <!--<span :class="{on:url+'Home/Sevencircle/index' === $route.path}">小七圈</span>-->
    <!--</div>-->
    <!--<div class="tab-item" @click="switabTo(url+'Home/Center/index')">-->
    <!--<img :src="url+'Home/Center/index' === $route.path ? tabBarImgArr[3].selected : tabBarImgArr[3].normal" alt="聊天" class="myimg">-->
    <!--<span :class="{on: url+'Home/Center/index' === $route.path}">我的</span>-->
    <!--</div>-->
    <!--</div>-->

      <div slot="top" class="mint-loadmore-top">
        <span class="lodding"  v-show="topStatus !== 'loading'" :class="{ 'rotate': topStatus === 'drop' }"></span>
        <span v-show="topStatus === 'loading'">Loading...</span>
      </div>
      <div slot="bottom" class="mint-loadmore-bottom">
        <span class="lodding"  v-show="bottomPullText !== 'loading'" :class="{ 'rotate': bottomPullText === 'drop' }"></span>
        <span v-show="bottomPullText === 'loading'">Loading...</span>
      </div>
    </mt-loadmore>
  </div>
</template>

<script>
  import axios from 'axios'
  import  Base64 from  '../assets/js/base64'

  export default {
    name: "home",
    data(){
      return{
        list:[],
        url:this.$store.state.url,//接收路由过来的图片地址前缀
        serverTime: new Date().getTime(),//定义当前的时间,
        param:[],
        tea1:[],
        allLoaded:false,
        topStatus:'',
        bottomPullText:''
      }
    },
    mounted(){
			this.sdk.getJSSDK('','',this.$store.state.url);	
     // 微信分享
      this.WXConfig.wxShowMenu(
        // {title:document.title}
      );

      this.param=this.$route.query;
      this.postList(this.param);
    },
    methods:{
      loadTop() {
        this.$refs.loadmore.onTopLoaded();
      },
      loadBottom() {
        this.allLoaded = true;
        this.$refs.loadmore.onBottomLoaded();
      },
      postList(param){

        var nickname=param.nickname?param.nickname:0;
        var tel=param.tel?Base64.decode(param.tel):0;
        var unionid=param.unionid?Base64.decode(param.unionid):'';
        var openid=param.openid?Base64.decode(param.openid): '';
        var uid=param.uid?Base64.decode(param.uid):0;
        var name = param.name?Base64.decode(param.name):'';
        var major = param.major?Base64.decode(param.major):'';
        var sex = param.sex?Base64.decode(param.sex):0;
        var avatar = param.avatar?Base64.decode(param.avatar):'';
        var flic ={
          version:'v1',
          tel:tel,
          unionid:unionid,
          openid:openid,
          uid:uid,
          nickname:nickname,
          name:name,
          major:major,
          sex:sex,
          avatar:avatar
        }

          // console.log(flic)
        axios({
          method:'post',
          url:this.$store.state.url +'Api_v1/Class/getClassList',
          data:flic,
          headers: {
          },
        })
          .then((res)=>{
            var that=this
            that.list=res.data.data.class;
            // console.log(that.list)   //后台数据返回的课程参数
            for (var i = 0; i<this.list.length; i++){
              for (var j = 0; j<this.list[i].teachers.length;j++){
                this.tea1 = this.list[i].teachers.slice(0,3);
              }
            }
        }).catch((err)=>{
          console.log(err)
        })
      },

    },
    // 转换时间格式
      filters: {
        // 时间过滤器
        classType:function(val){
          if (val == 1)
          {
            return '普通班'
          }

         else if (val == 2)
          {
            return '保过班'
          }
        }
      }
  }
</script>

<style scoped>
  .lodding{
    font-size: 0.28rem;
    text-align: center;
    float: left;
    margin-left: 3.43rem;
  }
  .router{
    text-decoration:none;
    color: #000;
  }

  .all{
    /*margin-top: 0.98rem;*/
    width:6.9rem;
    height:6.2rem;
    background:rgba(255,255,255,1);
    box-shadow:0rem 0rem 0.10rem 0rem rgba(71,68,80,0.1);
    border-radius:0.10rem;
    margin-left: 0.3rem;
    margin-right: 0.3rem;
    margin-top: 0.3rem;
  }
  .head img{
    width:6.9rem;
    height:3.3rem;
    border-radius:0.10rem 0.10rem 0rem 0rem;
  }
  .contentname{
    /*width:6.53rem;*/
    /*height:0.61rem;*/
    font-size:0.28rem;
    font-family: "Ubuntu", -apple-system-font, "Helvetica Neue", "PingFang SC", "Microsoft YaHei", sans-serif !important;
    font-weight:500;
    color:rgba(51,51,51,1);
    margin-left: 0.16rem;
    line-height:0.38rem;
    margin-top: 0.19rem;
    margin-bottom: 0.3rem;
  }
  .teacher{
    list-style: none;
    float: left;
    display: inline;
  }
  .imgteacher1{
    width:0.55rem;
    height:0.55rem;
    border-radius:50%;
    margin-left: 0.2rem;
    float: left;
  }
  .imgteacher2{
    width:0.55rem;
    height:0.55rem;
    border-radius:50%;
    margin-left: 1rem;
    clear: both;
    float: left;
    margin-top: -0.54rem;
  }
  .myid1{
    font-size:0.20rem;
    font-family: "Ubuntu", -apple-system-font, "Helvetica Neue", "PingFang SC", "Microsoft YaHei", sans-serif !important;
    font-weight:500;
    text-align: center;
    margin-left: 0.2rem;
    margin-top: 0.2rem;
    clear: both;
    float: left;
  }
  .myid2{
    margin-top: 0.2rem;
    font-size:0.20rem;
    font-family: "Ubuntu", -apple-system-font, "Helvetica Neue", "PingFang SC", "Microsoft YaHei", sans-serif !important;
    font-weight:500;
    text-align: center;
    margin-left: 0.15rem;
    margin-right: 1rem;
    /*margin-top: -0.61rem;*/
    float: left;
  }
  .price{
    margin-top: 1.5rem;
  }
  .price2{
    margin-top: 1.4rem;
    border: none;
  }
  .price h3{
    height:0.23rem;
    font-size:0.30rem;
    font-family: "Ubuntu", -apple-system-font, "Helvetica Neue", "PingFang SC", "Microsoft YaHei", sans-serif !important;
    font-weight:800;
    color:rgba(255,2,20,1);
    float: right;
    margin-right: 1.3rem;
    margin-top: -0.95rem;
  }
  .price span{
    /*border: none;*/
    width:0.90rem;
    height:0.39rem;
    background:rgba(255,255,255,1);
    font-size:0.2rem;
    font-family: "Ubuntu", -apple-system-font, "Helvetica Neue", "PingFang SC", "Microsoft YaHei", sans-serif !important;
    /*font-weight:500;*/
    color:rgba(255,2,20,1);
    border-radius:0.15rem;
    border:0.01rem solid rgba(255,2,20,1);
    padding-bottom: 0.032rem;
    float: right;
    text-align: center;
    margin-top: -0.93rem;
    margin-right: 0.2rem;
  }
  .price p{
    font-size:0.20rem;
    font-family: "Ubuntu", -apple-system-font, "Helvetica Neue", "PingFang SC", "Microsoft YaHei", sans-serif !important;
    font-weight:500;
    color:rgba(255,2,20,1);
    line-height:0.32rem;
    float: right;
    margin-right: 0.2rem;
    margin-top: -0.51rem;
  }
  .price3{
    width:1.80rem;
    height:0.60rem;
    float: right;
    background:rgba(255,2,20,1);
    border-radius:0.30rem;
    margin-top: -0.95rem;
    margin-right: 0.2rem;
    font-size:0.28rem;
    font-family: "Ubuntu", -apple-system-font, "Helvetica Neue", "PingFang SC", "Microsoft YaHei", sans-serif !important;
    font-weight:500;
    color:rgba(255,255,255,1);
    line-height:0.32rem;
    border: none;
  }
  .button1{
    background:rgba(240,240,240,1);
    width:1.80rem;
    height:0.60rem;
    float: right;
    border-radius:0.30rem;
    margin-top: -0.95rem;
    margin-right: 0.2rem;
    font-size:0.28rem;
    font-family: "Ubuntu", -apple-system-font, "Helvetica Neue", "PingFang SC", "Microsoft YaHei", sans-serif !important;
    font-weight:500;
    color:rgba(153,153,153,1);
    line-height:0.32rem;
    border: none;
  }
  .time img{
    width:0.22rem;
    height:0.22rem;
    margin-left: 0.18rem;
    float: left;
    margin-top: 0.06rem;
    margin-right: 0.1rem;
  }
  .shopping{
    width:2.29rem;
    height:0.19rem;
    font-size:0.24rem;
    font-family: "Ubuntu", -apple-system-font, "Helvetica Neue", "PingFang SC", "Microsoft YaHei", sans-serif !important;
    color:rgba(194,201,211,1);
    float: right;
    text-align: right;
    margin-top: -0.54rem;
    margin-right: 0.2rem;
    margin-bottom: 0.3rem;
  }
  .myTime{
    width:6.9rem;
    font-size:0.24rem;
    font-family: "Ubuntu", -apple-system-font, "Helvetica Neue", "PingFang SC", "Microsoft YaHei", sans-serif !important;
    /*font-weight:500;*/
    color:rgba(194,201,211,1);
    line-height:0.32rem;
    float: left;
    margin-bottom: 0.19rem;
  }

  /*tab切换样式*/
  .bottom-tab{
    width:7.5rem;
    height:0.98rem;
    background:rgba(255,255,255,1);
    box-shadow:0rem -0.03rem 0.05rem 0rem rgba(71,68,80,0.06);
    opacity:0.95;

  position:fixed;
  left: 0rem;
  bottom: 0rem;
  display: flex;
  z-index: 999
  }

  .tab-item{
    font-size:0.24rem;
    font-family: "Ubuntu", -apple-system-font, "Helvetica Neue", "PingFang SC", "Microsoft YaHei", sans-serif !important;
    font-weight:500;
    color:rgba(194,201,211,1);
    display: flex;
    flex: 1;
    flex-direction: column;
    align-items: center;
    justify-content: center;
  }

  .myimg{
    width:0.42rem;
    height:0.42rem;
  }
  .on{
  color: #0287FF;
  }

</style>
